import React from "react";
import { Card, Typography, Progress } from "antd";
import { ThunderboltOutlined } from "@ant-design/icons";

const { Title, Text } = Typography;

const MagicValue = ({ currentValue = 100, maxValue = 100 }) => {
  const percentage = (currentValue / maxValue) * 100;

  return (
    <Card className="magic-value-card">
      <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
        <ThunderboltOutlined
          style={{ fontSize: 24, color: "#722ed1", marginRight: 8 }}
        />
        <Title level={4} style={{ margin: 0 }}>
          魔力值
        </Title>
      </div>
      <Progress
        percent={percentage}
        showInfo={false}
        strokeColor={{
          "0%": "#108ee9",
          "100%": "#722ed1",
        }}
      />
      <div style={{ marginTop: 8, textAlign: "center" }}>
        <Text strong>{currentValue}</Text>
        <Text type="secondary"> / {maxValue}</Text>
      </div>
    </Card>
  );
};

export default MagicValue;
